import React, { FC, useState } from "react";
import { useNavigate } from "react-router-dom";
import { Button, Result, Spin } from "antd";
import { useTitle } from "ahooks";
import useLoadQuestionData from "../../../hooks/useLoadQuestionData";
import useGetPageInfo from "../../../hooks/useGetPageInfo";
import styles from "./index.module.scss";
import StatHeader from "./StatHeader";
import ComponentList from "./ComponentList";
import PageStat from "./PageStat";
import ChartStat from "./ChartStat";

const Stat: FC = () => {
  const nav = useNavigate();
  const { loading } = useLoadQuestionData();
  const { title, isPublished } = useGetPageInfo();

  //状态提升 selectedId type
 const [selectedComponentId,setSelectedComponentId]=useState('')
 const [selectedComponentType,setSelectedComponentType]=useState('')

  useTitle(`问卷统计-${title}`);
  //loading 效果
  const LoadingElem = (
    <div style={{ textAlign: "center", marginTop: "60px" }}>
      <Spin />
    </div>
  );
  //生成内容函数
  function genContentElem() {
    if (typeof isPublished=='boolean'&&!isPublished) {
      return (
        <Result
          status="500"
          title="该问卷尚未发布"
          subTitle="该问卷尚未发布-请选择已经发布的问卷查看"
          extra={
            <Button
              type="primary"
              onClick={() => {
                nav(-1);
              }}
              size="large"
            >
              返回
            </Button>
          }
        />
      );
    }
    return (
      <>
        <div className={styles.left}>
          <ComponentList selectedComponentId={selectedComponentId} setSelectedComponentType={setSelectedComponentType} setSelectedComponentId={setSelectedComponentId}/>
        </div>
        <div className={styles.main}>
          <PageStat selectedComponentId={selectedComponentId} setSelectedComponentType={setSelectedComponentType} setSelectedComponentId={setSelectedComponentId}/>
        </div>
        <div className={styles.right}><ChartStat selectedComponentId={selectedComponentId} selectedComponentType={selectedComponentType} /></div>
      </>
    );
  }

  return (
    <div className={styles.container}>
      <div>
        <StatHeader/>
      </div>
      <div className={styles["content-wrapper"]}>
        {loading && LoadingElem}
        {!loading&&<div className={styles.content}>{genContentElem()}</div>}
      </div>
    </div>
  );
};
export default Stat;
